<template>
	<view class="fa_box">
		<!-- 头部返回上一页 -->
		<view class="top_back">
			<image src="https://yy.dx1126.cn/images/back.png" mode="" @click="backTo"></image>
		</view>

		<view class="fa_top">
			<view class="videos">
				<video :src="src" :autoplay='true' :controls="false" :show-center-play-bt="false" :loop="true"
					:enable-play-gesture="true" :muted="true"></video>
			</view>
			<view class="text">
				<!-- 
				 auto-focus	Boolean	false	自动聚焦，拉起键盘
				 auto-height	Boolean	false	是否自动增高，设置auto-height时，style.height不生效
				 maxlength	Number	140	最大输入长度，设置为 -1 的时候不限制最大长度
				 -->
				<textarea :value="text" @input="model" placeholder="请添加你的视频描述" :auto-focus="true" :auto-height="true"
					:maxlength='-1'></textarea>
			</view>

			<!-- 底部按钮 -->
			<view class="fa_bottom" @click="setVideo">
				<text>发布</text>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		useIndexStore
	} from '@/store/pinia.js';

	let store = useIndexStore()

	// 视频地址
	let src = ref('')
	let text = ref('')
	// 实现双向绑定
	const model = (e) => {
		text.value = e.detail.value
	}

	// 返回上一页
	const backTo = () => {
		uni.navigateBack(1)
	}

	onLoad((query) => {
		src.value = query.src
	})

	// 发布
	const setVideo = () => {
		if (text.value == '') {
			uni.showToast({
				title: '描述不得为空',
				icon: 'error',
				duration: 2000
			});
		} else {
			store.addVideo(src.value, text.value)
			uni.reLaunch({
				url: '/pages/index/index'
			})
		}

	}
</script>

<style lang="less" scoped>
	.fa_box {
		width: 750rpx;
		height: 100%;

		// 返回上一页
		.top_back {
			width: 100%;
			height: 150rpx;
			position: relative;
			background-image: linear-gradient(to top right, #fc3960, #fd7638);
			top: 0;
			left: 0;
			z-index: 20;

			image {
				width: 50rpx;
				height: 50rpx;
				position: absolute;
				top: 50%;
				left: 30rpx;
			}
		}

		.fa_top {
			width: 100%;
			height: 200rpx;
			padding: 20rpx 40rpx;

			video {
				width: 200rpx;
				height: 200rpx;
				border-radius: 20rpx;
			}

		}

		.text {
			width: 100%;

			// border: 1px solid black;

			textarea {
				width: 100%;
				height: 100%;
			}
		}

		.fa_bottom {
			background-image: linear-gradient(to top right, #fc3960, #fd7638);
			position: fixed;
			bottom: 40rpx;
			left: 50%;
			transform: translateX(-50%);
			z-index: 30;
			color: white;
			width: 50%;
			height: 100rpx;
			border-radius: 50px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>